<template>
  <div id="app">
    <header2></header2>
		<div>
			<input type="text" placeholder="你要查谁的手机号？" v-model="name">
			<button @click="getPhone">查询</button>
		</div>
    <router-view/>
  </div>
</template>

<script>
import axios from 'axios'
import header2 from './components/class2/header2'
import gyf from './components/HelloWorld'
import page from './components/pagination'
export default {
  name: 'App',
  data() {
    return {
			// 你要查谁的手机号
			name: '马超',
      currentPage: 1,
      goodsList: [
        {
          name: 'iphone',
          price: 999
        },
        {
          name: 'iphone1',
          price: 999
        },
        {
          name: 'iphone2',
          price: 999
        },
      ]
    }
  },
  components: {
    gyf, page, header2
  },
  created() {
    
  },
  methods: {
    pageHandler(v) {
      this.currentPage = v
		},
		// 查询对应人物的手机号
		getPhone() {
			axios.get(`http://127.0.0.1:3000/userinfo`, {
        params: {
          name: this.name
        }
      })
				.then(data => {
					console.log(data)
				})
				.catch(err => {
					console.log(err)
				})
		}
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* base.css */
/*cssæ ·å¼åˆå§‹åŒ–*/
	body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
	body{font:12px "å®‹ä½“","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
	a{color:#333;text-decoration:none;}
	a:hover{color:#E53B3B;text-decoration:none;}
	em{font-style:normal;}
	ul,li{list-style:none;}
	img{border:0;vertical-align:middle;}
	table{border-collapse:collapse;border-spacing:0;}
	p{word-wrap:break-word;}
	
	/*ç‰ˆå¿ƒ*/
	.areaheart{width:1410px;margin:0 auto;}

	.header{
		width:1410px;
		height:680px;
		margin:0 auto;
		
		overflow:hidden;
		position:relative;
		}
	.header ol{
		position: absolute;
		top:50%;
		margin-top: -180px;
		right:0;
		z-index: 2;
	}
	.header ol li{
		height:100px;
		width:200px;
		border:1px solid transparent;
		margin-bottom: 10px;
	}
	.header ol .current{
		border:1px solid red;
	}
	.banner{width:1410px;
		height:680px;position: absolute;left:0;top:0;z-index: 1;}
	.banner ul {position: relative; }
	.banner ul li{
		width:1410px;
		height:680px;
		position: absolute;
		left:0;
		top:0;
		
	}

	.nav{
		height:60px;
		width:1410px;
		margin-bottom:500px;
		background:rgba(0,0,0,0.3);
		z-index: 2;
		position: absolute;
		top:20px;
		left:0;
		}
	.nav .nav-in{height:60px;padding-left:380px;position: relative;}
	.nav ul li{	
		float:left;
		line-height:60px;
		text-align:center;
		height:60px;
		position: relative;
		}
	.nav-in ul li{
		background:rgba(0,0,0,0.3);
	}
	.nav .nav-in ul{
		position: absolute;
		top: 60px;
		left: 0;
		display: none;

	}
	.header span{
		width:45px;
		height:45px;
		position: absolute;
		top:50%;
		margin-top: -22px;
		z-index: 2;
		cursor: pointer;
	}
	.header .arr-l{
		left:0;

	}
	.header .arr-r{
		right:0;
	}
	.nav ul li a{
		display:inline-block;
		height:60px;
		font:normal 16px/60px "å¾®è½¯é›…é»‘";
		padding:0 30px;
		color:white;
		}
	.nav ul li a:hover{
		display:block;
		text-decoration:none;
		height:60px;
		font:normal 16px/60px "å¾®è½¯é›…é»‘";
		padding:0 30px;
		background:red;
		}
	/*logoæ ‡å¿—*/
	.logo{
		width:168px;
		height:130px;
		position:absolute;
		left:205px;
		top:20px;
		z-index: 2;

		}
	/*é¡¶éƒ¨è”ç³»æ–¹å¼*/
	.header-contact{
		height:65px;
		width:1410px;
		background:rgba(0,0,0,0.7);
		z-index: 2;
		position: absolute;
		left:0;
		bottom:0;
		}
	.header-contact02{
		height:35px;
		width:1410px;
		background:rgba(255,0,0,0.6);
		font:18px "å¾®è½¯é›…é»‘";
		text-align:center;
		line-height:35px;
		color:white;
		position: absolute;
		bottom:65px;
		left: 0;
		z-index: 2;
		}
	.contact-content-public{
		float:left;
		width:320px;
		height:65px;
		margin-left:25px;
		border-right:1px white dashed;
		cursor:pointer;
		}
	.contact-qq{
		background:url(/static/img/contact-qq.png) no-repeat left bottom;
		}
	.contact-public-qq{
		font:lighter 20px "å¾®è½¯é›…é»‘";
	color:white;
	padding-left:150px;
	padding-top:8px;
		}
	.contact-public-time{
	font:lighter 14px "å®‹ä½“";
	color:white;
	padding-left:150px;
	padding-top:5px;
		}
	
	.contact-weixin{
		background:url(/static/img/contact-weixin.png) no-repeat 20px bottom;
		}
	.contact-weibo{
		background:url(/static/img/contact-weibo.png) no-repeat 20px bottom;
		}
	.show-case{
		border:none;
		background:url(/static/img/show-case.png) no-repeat 20px bottom;
		}
	.content-body{
		width:1410px;
		/*background:grey;*/
		
		margin:0 auto;
		}

	/*åº•éƒ¨*/
	.end-big{
		width:100%;
		background:#E53B3B;
	}
	.end-in .end-link{
		height:120px;
		width:1410px;
		}
	.end-in .end-link p{
		font:normal 24px "å¾®è½¯é›…é»‘";
		color:#620A09;
		padding:20px 0 10px 30px;
		}
	.end-in .end-link .link
	{
		padding:10px 30px;
		}
	.end-in .end-link .link a{
		display:block;
		float:left;
		padding:4px 8px;
		font: 12px "å®‹ä½“";
		color:#fff;
		}
	.end-in .end-nav{
		background:#E53B3B;
		height:110px;
		width:1410px;
		}
	.end-in .end-nav div{
		
		height:110px;
		width:120px;
		float:left;
		}
	.end-in .end-nav div ul{padding-top:20px;}
	.end-in .end-nav div ul li{font:12px "å®‹ä½“";
	 line-height:24px;}
	.end-in .end-nav div ul li a{color:#fff;}
	.end-big .end-nav .nav0{background:url('/static/img/end-logo.jpg') no-repeat 20px 20px;
		width:320px;cursor:pointer;
	}
	.end-big .end-nav .nav00{background:url(/static/img/map.jpg) no-repeat 20px 20px ;width:350px;cursor:pointer;}
	.end-big .beian{ width:100%;
	margin-top:10px;
	height:80px;
	background:#CE2E2E;
	 }
	.end-big .beian div{
		height:80px;
		 float:left;}
	.end-big .beian .one{ background:url('/static/img/400tele.jpg') center no-repeat; margin:0 20px;width:280px; }
	.end-big .beian .two{ background:url('/static/img/add.jpg') center no-repeat;margin-right:20px;width:280px;}
	.end-big .beian .three{background:url('/static/img/online.jpg') center no-repeat;margin-right:20px;width:210px;}
	.end-big .beian .four{ background:url('/static/img/qq.jpg') center no-repeat;margin-right:20px;width:210px; }
	.end-big .beian .five p{font:12px "å®‹ä½“"; color:#fff; line-height:24px; padding-top:10px;margin-left: 250px;}
/* base.css */

</style>
